


<!-- // 防抖 debounce
// 当某个时间点触发事件后，开启一个定时器，
// 到定时器结束后执行，触发事件，如果参数在定时器期间有变化，以最后的为准 -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>防抖</title>
    
</head>
<body>
    <input id="input" type="text">
</body>
<script>
    input.oninput = debounce(inputChange, 500);
    function inputChange (e) {
        console.log(e)
    }
    function debounce (cb, t) {
        let bt = null;
        let timer = null;
        return function () {
            let that = this;
            let args = arguments;
            let ct = new Date();
            // 如果在小于间隔时间内又触发了一次，那么清空,重新开启
            if (ct - bt < t) {
                clearTimeout(timer);
                timer = setTimeout(function () {
                    cb.call(that, ...args)
                    clearTimeout(timer);
                }, t)
            } else {
                timer = setTimeout(() => {
                    cb.call(this, ...arguments)
                    clearTimeout(timer);
                }, t)
                bt = ct;
            }
            // 每一次新的触发，都要把开始时间重置为当前时间
            
        }
    }
</script>
<!-- 
    调用一个函数
    函数先不执行
    开启一个定时，延时x，
    如果在x时间内又有调用，则顺延x，
    直至x时间到，没有新的调用，执行 
-->

</html>